<template>
  <div class="footer">
    <audio ref="audio1" @timeupdate="timeChange" :src="Src" autoplay></audio>
    <!--    似乎少了下面这个audio播放不了音乐，尚未知道原因，所以只能把它隐藏-->
<!--    <audio ref="audio" :src="Src" controls v-show="false"></audio>-->
    <div class="left" v-show="playId">
      <img @click="drawer1 = true" :src="playImg" alt="" style="cursor: pointer" />
      <div class="left-info">
        <div class="playName">{{ playName }}</div>
        <div class="player">{{ player }}</div>
      </div>
    </div>
    <div class="left" v-show="!playId">
      <img @click="drawer1 = true"
           src="~@/assets/img/header/logo.svg" alt=""
           style="cursor: pointer"
      />
    </div>
    <div class="center">
      <div class="top">
        <i class="iconfont icon-shunxushunxubofang10" @click="isRandom = !isRandom" v-show="!isRandom"></i>
        <i class="iconfont icon-xunhuanbofang" @click="isRandom = !isRandom" v-show="isRandom"></i>
        <i class="iconfont icon-xiayishou" @click="lastSong"></i>
        <i class="iconfont icon-bofang" @click="play" v-show="isPlay"></i>
        <i class="iconfont icon-zanting" @click="pause" v-show="!isPlay"></i>
        <i class="iconfont icon-shangxiayishou" @click="nextSong"></i>
      </div>
      <div class="bottom">
        <span class="start">{{initTime}}</span>
        <el-slider v-model="value1" @change="value1Change" :show-tooltip="false"></el-slider>
        <span class="end">{{totalTime}}</span>
      </div>
    </div>
    <div class="list">
      <i class="iconfont icon-yinliang"></i>
      <el-slider v-model="value2" class="voice" @change="value2Change"></el-slider>
      <i @click="drawer = true"
         class="showlistBtn iconfont icon-dazhongicon22">
      </i>
    </div>
<!--    歌曲详情弹窗-->
    <el-drawer
      class="drawer1"
      title="当前播放"
      size="100%"
      :show-close="true"
      direction="btt"
      :wrapperClosable="true"
      :visible.sync="drawer1"
      :with-header="false"
    >
      <img class="pull-dowm"
           @click="drawer1 = false"
           src="~@/assets/img/footer/pull-dowm.svg" alt="">
      <div class="not-show" v-show="!playId">暂无音乐播放</div>
      <div class="show"  ref="show" v-show="playId">
        <div class="detail_contain">
          <div class="detail_top">
            <div class="show_left">
              <img :style="{animationPlayState:!isPlay ? 'running' : 'paused'}"
                   :src="playImg" alt="">
            </div>
            <div class="right">
              <div class="right_playname">{{ playName }}</div>
              <div class="right_player">{{ player }}</div>
              <div class="lyric">
                <el-col :span="23" class="song-lyric" :style="lyricMove">
                  <el-row v-for="(item, index) in lyric"
                          :key="index"
                          class="lyric-row"
                          :class="{lyric_active:currentLyric === index}"
                  >
                    {{item.text}}
                  </el-row>
                </el-col>
              </div>
            </div>
          </div>
          <div class="detail_bottom">
            <div v-if="currentPage === 0">
              <p class="comment_title">精彩评论</p>
              <div class="comment_box" v-for="(item, index) in hotComments" :key="index">
                <div class="comment_left">
                  <img :src="item.user.avatarUrl" alt="">
                </div>
                <div class="comment_right">
                  <div class="comment_info1">
                    <span class="nickname_common">{{item.user.nickname}}:</span>
                    {{item.content}}
                  </div>
                  <div class="comment_info2" v-if="item.beReplied.length !== 0">
                    <span class="nickname_common">@{{item.beReplied[0].user.nickname}}:</span>
                    {{item.beReplied[0].content}}
                  </div>
                  <div class="comment_other">
                    <span>{{showTime(item.time)}}</span>
                    <img src="~@/assets/img/footer/liked.svg" alt="">
                    <span>{{item.likedCount}}</span>
                  </div>
                </div>
              </div>
              <div class="more_goodComment">更多精彩评论</div>
            </div>
            <div>
              <p class="comment_title">最新评论({{total}})</p>
              <div class="comment_box" v-for="(item, index) in comments" :key="index">
                <div class="comment_left">
                  <img :src="item.user.avatarUrl" alt="">
                </div>
                <div class="comment_right">
                  <div class="comment_info1">
                    <span class="nickname_common">{{item.user.nickname}}:</span>
                    {{item.content}}
                  </div>
                  <div class="comment_info2" v-if="item.beReplied.length !== 0">
                    <span class="nickname_common">@{{item.beReplied[0].user.nickname}}:</span>
                    {{item.beReplied[0].content}}
                  </div>
                  <div class="comment_other">
                    <span>{{showTime(item.time)}}</span>
                    <img src="~@/assets/img/footer/liked.svg" alt="">
                    <span>{{item.likedCount}}</span>
                  </div>
                </div>
              </div>
            </div>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="20"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </div>
      </div>
      <div class="mask_mask">
        <img :src="playImg" alt="">
      </div>
    </el-drawer>
<!--      歌单弹窗-->
    <el-drawer
      size="400px"
      id="drawer"
      title="当前播放"
      :visible.sync="drawer"
      :with-header="false">
          <div class="header">
            <h3>当前播放</h3>
            <div class="other">
              <span class="count">总{{$store.state.playList.length}}首</span>
              <img src="~@/assets/img/footer/add.svg" alt="">
              <span class="collect">收藏全部</span>
              <span class="remove" @click="removeList">清空列表</span>
            </div>
          </div>
          <div v-for="(item, index) in $store.state.playList"
               class="item" @dblclick="dblClick(index)">
            <div class="item-fir img-box" v-show="$store.state.playList[index].isActive">
              <img v-show="!isPlay" src="~@/assets/img/footer/play.svg" alt="">
              <img v-show="isPlay" src="~@/assets/img/footer/pause.svg" alt="">
            </div>
            <span class="item-fir num" v-show="!$store.state.playList[index].isActive">{{ index < 9 ? "0" + (index + 1) : index + 1 }}</span>
            <span class="playName"
                  :class="{active:$store.state.currentIndex === index}"
            >
              {{item.playName}}
            </span>
            <span class="player">{{item.player}}</span>
            <i class="iconfont icon-RectangleCopy" @click="removeSong(index)" ></i>
          </div>
    </el-drawer>
  </div>
</template>

<script>
import { format } from "@/components/common/utilis";
import {formatDate} from '@/components/common/utilis'
import {home} from "@/network/home";

export default {
  name: "Footer",
  data() {
    return {
      tap: false,         //辅助判断歌曲url是否变化的状态
      totalTime: "00:00", //歌曲总时间
      initTime:'00:00',   //初始时间
      drawer: false,      //歌单弹窗是否显示
      drawer1:false,      //歌曲弹窗是否显示
      value1: 0,          //歌单进度条初始值
      value2: 50,         //电量初始值
      isPlay:true,        //是否播放
      isRandom:false,     //是否随机播放
      currentIndex:null,  //当前索引（歌单列表）
      idIndexArr:[],      //索引数组
      idIndex:0,          //当前索引
      lyric:[],           //歌词信息
      currentLyric:0,     //当前歌词索引
      lyricMove:{
        top:null,
      },
      comments:[],        //歌曲评论
      hotComments:[],     //热门评论
      total:0,            //评论总数
      currentPage:0,      //当前评论页
    };
  },
  computed: {
    //当前歌曲传入的数据
    playImg() {
      return this.$store.state.playContent.playImg;
    },
    playName() {
      return this.$store.state.playContent.playName;
    },
    player() {
      return this.$store.state.playContent.player;
    },
    playId() {
      return this.$store.state.playContent.playId;
    },
    Src() {
      return (
        "https://music.163.com/song/media/outer/url?id=" +
          // this.idIndexArr[this.idIndex] +
        this.$store.state.playContent.playId +
        ".mp3"
      );
    },
  },
  created() {
    // 歌单描述中的播放全部按钮
    this.$bus.on('playAll',() => {
      this.isPlay = false
    })
    //最新音乐页中播放全部的按钮
    this.$bus.on('emitPlayAll',() => {
      this.isPlay = false
    })
    //每日推荐中播放全部的按钮
    this.$bus.on('playAllByDailyRecommend',() => {
      this.isPlay = false
    })
  },
  mounted() {
    //歌曲一改变设置的状态改变，然后再监听tap是否改变
    this.$nextTick(() => {
      this.tap = !this.tap;
    });
  },
  watch: {
    //监听歌曲的url是否变化
    tap() {
      this.$refs.audio1.load(); // 每一次动态改变aduio的src后，都要load一次
      this.$refs.audio1.oncanplay = () => {
        this.totalTime = format(this.$refs.audio1.duration);
        // 告诉vuex歌曲路径发生了改变
        this.$store.commit('changeSrc')
      };
    },
    //监听判断是否添加了歌曲进vuex，若添加了就把当前播放按钮状态改变
    '$store.state.playContent.a'(){
      this.isPlay = false
    },
    '$store.state.playList'(){
      // a.监听歌单是否还有歌曲，改变“播放状态” “进度条” “总时间”
      if(this.$store.state.playList.length === 0){
        this.isPlay = true
        this.value1 = 0
        this.totalTime = '00:00'
      }
    },
    '$store.state.playContent'(){
      // a.歌曲一改变更新歌单列表的索引数组
      // 更新前把保存id的数组初始化，否则会出现叠加重复的id组
      this.idIndexArr = []
      this.$store.state.playList.forEach(item => {
        this.idIndexArr.push(item.playId)
      })
      this.idIndex = this.idIndexArr.indexOf(this.$store.state.playContent.playId)
      // b.请求歌词数据
      this.getSongsLyric(this.idIndexArr[this.idIndex])
      // c.请求歌曲评论信息
      this.getSongsComment(this.idIndexArr[this.idIndex], this.currentPage * 15)


    },
    //监听时间实现歌词滚动
    value1(){
      this.lyric.forEach((element, index) => {
        if (Math.floor(this.$refs.audio1.currentTime) === element.time) {
          this.currentLyric = index
          this.lyricMove.top = -index * 28 + 12 + 'px';
        }
      })
    },
  },

  methods: {
    /**
     * 方法
     */
    //继续播放音乐的方法
    play(){
      if(this.$store.state.playList.length !== 0){
        this.$refs.audio1.play()
        this.isPlay = false
      }
    },
    //暂停音乐的方法
    pause(){
        this.$refs.audio1.pause()
        this.isPlay = true
    },
    //清空歌单列表的方法
    removeList(){
      this.$store.commit('removeList')
    },
    //删除单曲的方法
    removeSong(index){
      this.$store.commit('removeSong', index)
    },
    //双击歌曲，歌名改变颜色的方法
    dblClick(index){
      this.isPlay = false
      this.$store.commit('dblClick', index)
    },
    //播放下一首的方法
    nextSong(){
      if(!this.isRandom){
        this.listPlayNext()
      }else this.randomPlay()
    },
    //播放上一首的方法
    lastSong(){
      if (!this.isRandom){
        this.listPlayLast()
      }else this.randomPlay()
    },
    //监听歌曲时间变化的方法
    timeChange(){
      // if(this.$refs.audio1.currentTime){

        this.initTime = format(this.$refs.audio1.currentTime)
        this.value1 = (this.$refs.audio1.currentTime/this.$refs.audio1.duration) * 100
      // }
      //列表播放
      if(!this.isRandom){
        if (this.value1 >= 100) {
          this.listPlayNext()
        }
      }
      //随机播放
      if(this.isRandom){
        if(this.value1 >= 100){
          this.randomPlay()
        }
      }
    },
    //拖动歌曲进度条的方法
    value1Change(){
      let audio1 = this.$refs.audio1
      audio1.currentTime = (this.value1 / 100) * audio1.duration
    },
    //拖动音量进度条的方法
    value2Change(){
      let audio1 = this.$refs.audio1
      audio1.volume = this.value2 / 100
    },
    //格式化评论发表的时间
    showTime(value){
      const date = new Date(value)
      return formatDate(date, 'yyyy年MM月dd日  hh:mm')
    },
    //点击分页请求评论数据的方法
    handleCurrentChange(newPage){
      //回到顶部
      // this.$refs.show.scrollTop = 0
      //请求对应页数的评论
      this.currentPage = newPage - 1
      this.getSongsComment(this.idIndexArr[this.idIndex],this.currentPage * 15)
    },

    /**
     * 函数
     */
    //列表播放下一首的函数
    listPlayNext(){
      if(this.idIndex + 1 === this.idIndexArr.length){
        this.idIndex = 0
      }else this.idIndex++
      this.$refs.audio1.src = "https://music.163.com/song/media/outer/url?id=" + this.idIndexArr[this.idIndex] + ".mp3"
      this.isPlay = false
      this.$store.commit('songChange', this.idIndex)
    },
    //列表播放上一首的函数
    listPlayLast(){
      if(this.idIndex  === 0){
        this.idIndex = this.idIndexArr.length - 1
      }else this.idIndex--
      this.$refs.audio1.src = "https://music.163.com/song/media/outer/url?id=" + this.idIndexArr[this.idIndex] + ".mp3"
      this.isPlay = false
      this.$store.commit('songChange', this.idIndex)
    },
    //随机播放的函数
    randomPlay(){
        let result = Math.floor(Math.random() * this.idIndexArr.length)
        this.$refs.audio1.src = "https://music.163.com/song/media/outer/url?id="
          + result + ".mp3"
      this.isPlay = false
      this.$store.commit('songChange', result)
    },
    //请求歌词数据的函数
    getSongsLyric(id){
      home.getSongsLyric(id).then(res => {
        this.formatLyric(res.data.lrc.lyric)
      })
    },
    //请求歌曲评论的函数
    getSongsComment(id,offset){
      home.getSongsComment(id,offset).then(res => {
        this.comments = res.data.comments
        this.hotComments = res.data.hotComments
        this.total = res.data.total
      })
    },
    //处理歌词文本的函数
    formatLyric(lyric){
      this.lyric = []    //重新请求歌词时把上首歌歌词清空再处理,避免歌词叠加
      let arr = lyric.split('\n') //每一行歌词放进数组里
      let row = arr.length
      for(let i = 0; i < row; i++){
        let temp_row = arr[i]
        let temp_arr = temp_row.split(']')
        let text = temp_arr.pop()    //pop方法返回删除的元素,即是处理过的歌词文本
        //再对剩下的歌词时间做处理
        temp_arr.forEach(item => {
          let obj = {}
          let time_arr = item.substr(1, item.length - 1).split(':')//把多余的'['去掉，并分离出分和秒
          let s = parseInt(time_arr[0] * 60 + Math.ceil(time_arr[1]))
          obj.time = s
          obj.text = text
          this.lyric.push(obj) //将每一行歌词保存到歌词数组里
        })
      }
      this.lyric.sort(this.sortRule) //由于不同时间的相同歌词按顺序排列了,所以需要重新排序
      this.$store.commit('setLyric', this.lyric)
    },
    sortRule(a, b){  //设置一下排序规则
      return a.time - b.time
    },
  },
};
</script>

<style scoped>
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  background-color: #FFFFFF;
  border-top: 1px solid #c1b8b8;
  display: flex;
}
.left {
  display: flex;
  width: 360px;
  padding: 4px 20px;
}
.left img {
  width: 40px;
  height: 40px;
  border-radius: 5px;
}
.left-info {
  margin: 6px 10px 0;
}
.left-info .playName {
  font-size: 14px;
  color: #403535;
  /*文本溢出处理*/
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.left-info .player {
  font-size: 12px;
  margin-top: 2px;
}
.center {
  width: 400px;
}
.top{
  width: 300px;
  margin-left: 105px;
  margin-top: 4px;
}
.top i{
  margin: 8px;
}
.bottom{
  display: flex;
  margin-left: 30px;
}
.start,.end{
  font-size: 13px;
}
.end{
  margin-left: -25px;
  margin-top: 10px;
}
.start{
  margin-right: -16px;
  margin-top: 10px;
}
.list {
  position: relative;
  z-index: 1;
}
.icon-yinliang{
  position: relative;
  top: 16px;
  left: 280px;
}
.voice{
  position: relative;
  left: 240px;
  top: -12px;
}
.icon-dazhongicon22{
  position: relative;
  left: 400px;
  top: -38px;
}
/deep/ .bottom .el-slider{
  margin-left: -30px;
  width: 350px;
}
/deep/  .el-slider__runway{
  height: 3px;
  width: 70%;
  margin-left: 60px;
}
/deep/ .voice .el-slider__runway{
  width: 70px;
}
/deep/ .el-slider__button {
  width: 10px !important;
  height: 10px !important;
  border: 1px solid rgb(198, 47, 47) !important;
}

/deep/ .el-slider__bar {
  height: 4px;
  background-color: #ec6363;
}

/*弹窗*/
/*歌曲详情页弹窗*/
/deep/.drawer1 {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 50px;
  backdrop-filter: blur(20px);  /*毛玻璃过渡*/
}
/deep/.drawer1 .el-drawer__body{

}
/*设置遮罩层*/
.mask_mask{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.mask_mask img{
  width: 100%;
  height: 94%;
  transform: scale(1.2);
  filter: blur(20px);
  opacity: .4;

}

.not-show{
  font-size: 19px;
  text-align: center;
  margin-top: 270px;
}
.show{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: transparent;
  display: flex;
}
/*滚动条内槽*/
.show::-webkit-scrollbar {
  width: 5px;
  background-color: #dcefef;
}
/*滚动条滑块*/
.show::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #9086a7;
}

.detail_contain{
  margin-left: 200px;
  margin-right: 200px;
}
.detail_top{
  display: flex;
  padding-bottom: 30px;
}
.show_left{
  width: 400px;
  height: 400px;
  text-align: center;
}
.show .right{
  flex: 1;
  padding-top: 20px;
  margin-left: 100px;
  text-align: center;
  margin-right: 100px;
}
@keyframes anim1 {
  to{
    transform: rotate(0deg);
  }
  from{
    transform: rotate(360deg);
  }
}
.show_left img{
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: relative;
  left: 100px;
  top: 100px;
  border: 1px solid #5a5757;
  animation:anim1 linear 10s infinite;
}
.right_playname{
  color: #161616;
  font-size: 21px;
  font-weight: 500;
  margin: 5px 0;
}
.right_player{
  font-size: 13px;
  color: #504b4b;
  margin-bottom: 14px;
}
.right .lyric_active{
  font-size: 16px;
  color: #2a2727;
  font-weight: 550;
}
.lyric{
  position: relative;
  width: 280px;
  height: 300px;
  overflow: hidden;
}
.song-lyric{
  position: absolute;
  top: 100px;
  width: 280px;
  /*height: 400px;*/
  /*overflow: hidden;*/
  /*overflow-y: scroll;*/
}
.lyric-row{
  line-height: 30px;
  font-size: 14px;
}
/*隐藏滚动条*/
.song-lyric::-webkit-scrollbar {
  display: none;
}
/*下拉按钮*/
.pull-dowm{
  position: fixed;
  top: 18px;
  left: 30px;
  cursor: pointer;
  z-index: 999;
}

/*歌曲评论区*/
.comment_box{
  display: flex;
  width: 750px;
  padding: 20px 0;
  margin: 0 auto;
  font-size: 13px;
  border-bottom: 1px solid #E1E1E5;
}
.comment_left{
  width: 80px;
}
.comment_left img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 25px;
  margin-top: 7px;
}
.comment_right{
  flex: 1;
  line-height: 22px;
}
.nickname_common{
  color: #5070d0;
}
.comment_title{
  color: #2a2727;
  font-weight: 550;
  margin-left: 20px;
  margin-top: 20px;
}
.more_goodComment{
  width: 120px;
  font-size: 14px;
  line-height: 33px;
  margin: 30px auto;
  text-align: center;
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid #b0b0b6;
  background-color: #ffffff;
}
.comment_info2{
  padding: 5px 10px;
  margin: 5px 0;
  background-color: rgba(104, 94, 94, .1);
}
.comment_other{
  display: flex;
  padding: 8px 0;
}
.comment_other img{
  width: 18px;
  margin-right: 5px;
  margin-left: 450px;
  cursor: pointer;
}
/*分页按钮样式*/
/deep/ .el-pagination{
  width: 500px;
  margin: 0 auto;
  padding: 20px;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
  background-color: #e54c60;
  color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #6481d9;
}


/*歌曲列表弹窗*/
#drawer{
  position: fixed;
  /*top: 44px;*/
  top: 0;
  bottom: 50px;
}

.header>div{
  margin: 3px 0 8px 0;
}
.header .count{
  font-size: 12px;
  color: #807777;
  margin-right: 160px;
}
.header .collect,.remove{
  cursor: pointer;
  font-size: 14px;
  margin: 4px;
}
.header .remove{
  color: #5070d0;
}
.header img{
  width: 19px;
  height: 19px;
  position: relative;
  top: 4px;
  left: 4px;
  cursor: pointer;
}
.item{
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  transition: .3s;
}
.item:hover{
  background-color: #e8f5fa;
}
.item .item-fir{
  display: inline-block;
  width: 30px;
  height: 30px;
  /*background-color: #5070D0;*/
}
.img-box{
  position: relative;
  top: -12px;
}
.img-box img{
  width: 10px;
  height: 10px;
}
.img-box img:nth-child(2){
  width: 20px;
  height: 20px;
  position: relative;
  top: 4px;
}
.item span{
  color: #726969;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.item .num{
  font-size: 12px;
  color: #a39999;
}
.item .playName{
  width: 190px;
  margin-left: 6px;
}
#drawer .active{
  color: #F14965;
}
.item .player{
  width: 114px;
}
.item i{
  position: relative;
  top: -10px;
}
/deep/ .el-drawer__body{
  padding: 10px;
}

/* 设置滚动条的样式 */
/deep/ .el-drawer__body::-webkit-scrollbar {
  width: 5px;
  background-color: #dcefef;
}
/* 滚动条滑块 */
/deep/ .el-drawer__body::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #938de0;
}



</style>
